// 封装原生table
import React from 'react';
import { Checkbox } from 'antd';
import '../style/index.less';

export default class ProtogenesisTable extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            checkedAll: false,
            selectedRowKeys: [],
            selectedRows: [],
            data: [],
        }
    }

    componentWillReceiveProps(nextProps) {
        if (nextProps.params.data !== this.state.data) {
            let arr = nextProps.params && nextProps.params.data ? nextProps.params.data : [];
            // console.log(arr);

            this.setState({ data: arr }, () => {
                this.setCheckedAllStatus()
            });
        }
    }

    // 全选/反选
    handleCheckboxAll = () => {
        let data = this.state.data && this.state.data.length > 0 ? JSON.parse(JSON.stringify(this.state.data)) : [];
        for (var i = 0; i < data.length; i++) {
            if (this.state.checkedAll) {
                data[i].check = false
            } else {
                data[i].check = true
            }

        }
        this.setState({ data, checkedAll: !this.state.checkedAll }, () => {
            this.handleFilterSelectData()
        });
    }

    // 单个选中操作
    handleTriggerCheckbox = (rowData) => {
        let data = this.state.data && this.state.data.length > 0 ? JSON.parse(JSON.stringify(this.state.data)) : [];
        for (var i = 0; i < data.length; i++) {
            if (data[i].key === rowData.key) {
                data[i].check = !data[i].check;
                break;
            }
        }
        this.setState({ data }, () => {
            this.setCheckedAllStatus();
            this.handleFilterSelectData();
        });
    }

    // 设置全选框的选中状态
    setCheckedAllStatus = () => {
        let status = false;
        let data = this.state.data && this.state.data.length > 0 ? JSON.parse(JSON.stringify(this.state.data)) : [];
        for (var i = 0; i < data.length; i++) {
            if (data[i].check) {
                status = true;
            } else {
                status = false;
                break;
            }
        }
        this.setState({ checkedAll: status })
    }

    // 过滤选中的数据
    handleFilterSelectData = () => {
        let data = JSON.parse(JSON.stringify(this.state.data));
        let filterData = data.filter((function (item) { return item.check }))
        console.log(filterData);

        this.props.params.onChange(filterData, data);
    }

    render() {
        let { data } = this.state;
        let { params } = this.props;
        return (
            <div className="hospital-pharmacies" style={{ height: params && params.height ? params.height : '300px', overflow: 'hidden' }}>
                <div style={{ width: '100%', overflowY: 'scroll' }}>
                    <table className="table-detail-style ant-table-content">
                        <thead className="ant-table-header ant-table-thead">
                            <tr style={{ width: parseInt(params.width) + "px", overflow: "auto" }}>
                                <th style={{ width: '80px' }}>
                                    <Checkbox
                                        checked={this.state.checkedAll}
                                        onChange={this.handleCheckboxAll}
                                        disabled={data && data.length > 0 ? false : true}
                                    />
                                </th>
                                {params.columns && params.columns.map((item, index) => {
                                    return (
                                        <th key={index} style={{ width: parseInt(item.width) + 'px', textAlign: item.align ? item.align : "center" }}>{item.title}</th>
                                    )
                                })}
                            </tr>
                        </thead>
                    </table>
                </div>
                {data && data.length > 0 ? <div style={{ width: '100%', height: (params && params.height ? parseInt(params.height) - 45 : 255) + "px", overflow: "scroll" }}>
                    <table className="table-detail-style" style={{ borderTop: '0px' }}>
                        <tbody className="ant-table-tbody">
                            {data && data.map((item, index) => {
                                return (
                                    <tr key={index} style={{ width: parseInt(params.width) + "px", overflow: "auto" }} className={params && params.rowClassName && item.rowClassName === "Y" ? params.rowClassName : ""}>
                                        <td style={{ width: '80px' }} key={index}><Checkbox checked={item.check} disabled={item.disabled} onChange={() => this.handleTriggerCheckbox(item)} /></td>
                                        {params.columns && params.columns.map((itemChild, indexChild) => {
                                            return (
                                                <td key={indexChild}
                                                    style={{
                                                        width: parseInt(itemChild.width) + 'px', textAlign: itemChild.align ? itemChild.align : "center",
                                                        color: itemChild.dataIndex==="aclFlag" && item[itemChild.dataIndex] === "是" ? "red" : ""
                                                    }}
                                                >{item[itemChild.dataIndex]}</td>
                                            )
                                        })}
                                    </tr>
                                )
                            })}
                        </tbody>
                    </table>
                </div> : <div className="ant-table-placeholder" style={placeholderStyle}>
                        <div className="ant-empty ant-empty-normal">
                            <div className="ant-empty-image">
                                <img src="" alt="暂无数据" />
                            </div>
                            <p className="ant-empty-description">
                                暂无数据
                        </p>
                        </div>
                    </div>}
            </div>
        )
    }
};
let placeholderStyle = {
    borderRight: '1px solid #e8e8e8',
    borderLeft: '1px solid #e8e8e8',
    position: 'relative',
    top: 0
}